<template>
  <sys-dialog
    :title="parentDialog.title"
    :width="parentDialog.width"
    :height="parentDialog.height"
    :visible="parentDialog.visible"
    @onClose="parentOnClose"
    @onConfirm="parentOnConfirm">
    <div slot="content">
      <el-tree
        ref="parentTree"
        :data="treeList"
        node-key="id"
        :props="defaultProps"
        default-expand-all
        :expand-on-click-node="false"
        :highlight-current="true"
        @node-click="handleNodeClick">
        <div class="customer-tree-node" slot-scope="{ node, data }">
          <span v-if="data.children.length == 0">
            <i
              class="el-icon-document"
              style="color: #8c8c8c; font-size: 20px" />
          </span>
          <span v-else @click.stop="openBtn(data)">
            <svg-icon
              style="font-size: 25px"
              v-if="data.open"
              icon-class="add-s" />
            <svg-icon style="font-size: 20px" v-else icon-class="sub-s" />
          </span>
          <span>{{ node.label }}</span>
        </div>
      </el-tree>
    </div>
  </sys-dialog>
</template>

<script>
import SysDialog from '@/components/system/SysDialog'
import { getParentTreeApi } from '@/api/department'
export default {
  name: 'deptParentDialog',
  components: {
    SysDialog
  },
  data() {
    return {
      // 上级部门弹框属性
      parentDialog: {
        title: '',
        width: 300,
        height: 450,
        visible: false
      },
      // 树形结构的数据
      treeList: [],
      // 树的children属性绑定
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  methods: {
    async show() {
      this.parentDialog.title = '请选择上级组织'
      this.parentDialog.visible = true
      let res = await getParentTreeApi()
      if (res && res.code === 200) {
        this.treeList = res.data
      }
    },
    // 选项上级部门确认事件
    parentOnConfirm() {
      this.parentDialog.visible = false
    },
    // 选项上级部门取消
    parentOnClose() {
      this.parentDialog.visible = false
    },
    handleNodeClick(data) {
      console.log('树形控件', data)
      console.log(data.open)
      this.$emit('NodeClick', data)
    },
    // 树形控件的事件
    openBtn(data) {
      console.log(data.open)
      data.open = !data.open
      this.$refs.parentTree.store.nodesMap[data.id].expanded = !data.open
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-tree {
  // 将每一行的设置为相对定位 方便后面before after 使用绝对定位来固定位置
  .el-tree-node {
    position: relative;
    padding-left: 10px;
  }
  // 子集像右偏移 给数线留出距离
  .el-tree-node__children {
    padding-left: 20px;
  }
  //这是竖线
  .el-tree-node :last-child:before {
    height: 40px;
  }
  .el-tree > .el-tree-node:before {
    border-left: none;
  }
  .el-tree > .el-tree-node:after {
    border-top: none;
  }
  //这自定义的线 的公共部分
  .el-tree-node:before,
  .el-tree-node:after {
    content: '';
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }
  .tree :first-child .el-tree-node:before {
    border-left: none;
  }
  // 竖线
  .el-tree-node:before {
    border-left: 1px dotted #d9d9d9;
    bottom: 0px;
    height: 100%;
    top: -25px;
    width: 1px;
  }
  //横线
  .el-tree-node:after {
    border-top: 1px dotted #d9d9d9;
    height: 20px;
    top: 14px;
    width: 24px;
  }
  .el-tree-node__expand-icon.is-leaf {
    width: 8px;
  }
  //去掉elementui自带的展开按钮  一个向下的按钮,打开时向右
  .el-tree-node__content > .el-tree-node__expand-icon {
    display: none;
  }
  //每一行的高度
  .el-tree-node__content {
    line-height: 30px;
    height: 30px;
    padding-left: 10px !important;
  }
}
//去掉最上级的before  after 即是去电最上层的连接线
::v-deep .el-tree > div {
  &::before {
    display: none;
  }
  &::after {
    display: none;
  }
}
</style>
